<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--引入easyui的样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/themes/bootstrap/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/themes/icon.css">
<!-- 引入Js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>

</head>
<script type="text/javascript">
	//年、季度、月报表选择按钮
	$(function(){
			$("#yReprot").click(function(){
				$('#dlg1').dialog('open').dialog('center')
				.dialog('setTitle', '年度报表');
			});	
			$("#qReprot").click(function(){
				$('#dlg2').dialog('open').dialog('center')
				.dialog('setTitle', '季度报表');
			});	
			$("#mReprot").click(function(){
				$('#dlg3').dialog('open').dialog('center')
				.dialog('setTitle', '月报表');
			});	
	});
	
	//按年查询
	function selectYear(){
	    year=$("#year1").combobox("getValue");
		$("#rList").datagrid({
		    	url:"${pageContext.request.contextPath}/reprot/dyreprot_showDelReprot.do",
		    	queryParams: {
		    		year:year,
		    	},
		    	columns:[[    
		    	           {field:"tid" ,title:'统计',width:100  },
		                   {field:"sname" ,title:'配送点',width:100 },
		                   {field:"ptime" ,title:'报表时间',width:100 },
		                   {field:"ctime" ,title:'报表生成时间',width:100  },
		                   {field:"fname" ,title:'发货配送点',width:100 },
		                   {field:"weight" ,title:'配送货物总重量(kg)',width:100  },
		                   {field:"size" ,title:'总体积(m³)',width:100 },
		                   {field:"income" ,title:'配送收入(元)',width:100 ,align:'right'  }
		    	      ]]    
		    	
		    })
		    $('#dlg1').dialog('close');
	}
	
	//按年季度查询
	function selectYearQuarter(){
	    year=$("#year2").combobox("getValue");
	    quarter = $("#quarter1").combobox("getValue");
		$("#rList").datagrid({
		    	url:"${pageContext.request.contextPath}/reprot/dyqreprot_showDelReprot.do",
		    	queryParams: {
		    		year:year,
		    		quarter:quarter,
		    	},
		    	columns:[[    
		    	           {field:"tid" ,title:'统计',width:100  },
		                   {field:"sname" ,title:'配送点',width:100 },
		                   {field:"ptime" ,title:'报表时间',width:100 },
		                   {field:"ctime" ,title:'报表生成时间',width:100  },
		                   {field:"fname" ,title:'发货配送点',width:100 },
		                   {field:"weight" ,title:'配送货物总重量(kg)',width:100  },
		                   {field:"size" ,title:'总体积(m³)',width:100 },
		                   {field:"income" ,title:'配送收入(元)',width:100 ,align:'right'  }
		    	      ]]    
		    	
		    })
		    $('#dlg2').dialog('close');
	}
	
	//按年月查询
	function selectYearMonth(){
	    year=$("#year3").combobox("getValue");
	    month = $("#month1").combobox("getValue");
	    $("#rList").datagrid({
	    	url:"${pageContext.request.contextPath}/reprot/dymreprot_showDelReprot.do",
	    	queryParams: {
	    		year:year,
	    		month:month,
	    	},
	    	columns:[[    
	    	           {field:"tid" ,title:'统计',width:100  },
	                   {field:"sname" ,title:'配送点',width:100 },
	                   {field:"ptime" ,title:'报表时间',width:100 },
	                   {field:"ctime" ,title:'报表生成时间',width:100  },
	                   {field:"fname" ,title:'发货配送点',width:100 },
	                   {field:"weight" ,title:'配送货物总重量(kg)',width:100  },
	                   {field:"size" ,title:'总体积(m³)',width:100 },
	                   {field:"income" ,title:'配送收入(元)',width:100 ,align:'right'  }
	    	      ]]    
	    	
	    })
	    $('#dlg3').dialog('close');
	}
	
	//增加统计行
	$(function(){
		$("#rList").datagrid({
			 onLoadSuccess: function(){   
				 var rows = $('#rList').datagrid('getRows')//获取当前的数据行
			        var weightTotal = 0,//计算weight的总和
			            sizeTotal = 0, //统计size的总和
			            incomeTotal = 0//统计income的总和
			        for (var i = 0; i < rows.length; i++) {
			        	weightTotal += rows[i]['weight'];
			        	sizeTotal += rows[i]['size'];
			        	incomeTotal += rows[i]['income'];
			        }
			        //新增一行显示统计信息
			        $('#rList').datagrid('appendRow',{
			        	tid:'合计',
			        	weight: weightTotal,
			        	size: sizeTotal,
			        	income: incomeTotal
			        });
			   }   
		 })
	});
</script>
<body>
 <div  id="toolbar">
    <a class="easyui-linkbutton" id="yReprot"  data-options="iconCls:'icon-save'">年报表</a>
	<a class="easyui-linkbutton" id="qReprot" data-options="iconCls:'icon-save'">季度报表</a>
	<a class="easyui-linkbutton" id="mReprot" data-options="iconCls:'icon-save'">月报表</a>
	<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-print'" style="width:100px">导出到Excel</a>
 </div>
 
 <!-- 显示所有报表信息 -->
 <table id="rList"   toolbar="#toolbar" pagination="true" fit="true"
        url="${pageContext.request.contextPath}/reprot/dreprot_showDelReprot.do"
        striped="true" rownumbers="true" fitColumns="true" border="false"> 
    <thead>
        <tr>
            <th field="tid"  width='10' resizable='false' >统计</th>
            <th field="sname" width='10' resizable='false' >配送点</th>
            <th field="ptime" width='10' resizable='false'>报表时间</th>
            <th field="ctime" width='10' resizable='false' >报表生成时间</th>
            <th field="fname" width='10' resizable='false'>发货配送点</th>
            <th field="weight" width='10' resizable='false' >配送货物总重量(kg)</th>
            <th field="size" width='10' resizable='false'>总体积(m³)</th>
            <th field="income" width='10' resizable='false' >配送收入(元)</th>
        </tr>
    </thead>
</table>

    <!-- 查询年报表 选择年份 -->
    <div id="dlg1" class="easyui-dialog" closed="true"
		style="width: 250px; height: 280px; padding: 10px 20px" 
		buttons="#dlg-buttons">
		<div class="ftitle"><h3>选择报表年份</h3></div>
		<form id="years" method="post" novalidate>
		     选择年分<br>
		  <select class="easyui-combobox"  style="width:100px;"  id="year1">
		        <option value="2010">2010</option>
		        <option value="2011">2011</option>
		        <option value="2012">2012</option>
		        <option value="2013">2013</option>
		        <option value="2014">2014</option>
		        <option value="2015">2015</option>
		        <option value="2016">2016</option>
		   </select>
		</form>
	</div>
	<div id="dlg-buttons">
		<a class="easyui-linkbutton c6" id="yearselect" 
		   iconCls="icon-ok" onclick="selectYear()" style="width: 90px">确定</a> 
		<a class="easyui-linkbutton"
		   iconCls="icon-cancel" onclick="javascript:$('#dlg1').dialog('close')"
		   style="width: 90px">取消</a>
	</div>
 
   <!-- 查询季度报表 选择年份季度 -->
    <div id="dlg2" class="easyui-dialog" closed="true"
		style="width: 250px; height: 280px; padding: 10px 20px" 
		buttons="#dlg-buttons">
		<div class="ftitle"><h3>选择报表年份季度</h3></div>
		<form id="" method="post" novalidate>
		    选择年分<br>
		    <select class="easyui-combobox"  style="width:100px;" id="year2">
		        <option value="2010">2010</option>
		        <option value="2011">2011</option>
		        <option value="2012">2012</option>
		        <option value="2013">2013</option>
		        <option value="2014">2014</option>
		        <option value="2015">2015</option>
		        <option value="2016">2016</option>
		     </select><br>
		    选择季度<br>
			<select class="easyui-combobox"  style="width:100px;" id="quarter1">
		        <option value="1">一季度</option>
		        <option value="2">二季度</option>
		        <option value="3">三季度</option>
		        <option value="4">四季度</option>
		     </select>
		</form>
	</div>
	<div id="dlg-buttons">
		<a class="easyui-linkbutton c6" id="yqselect"
		   iconCls="icon-ok" onclick="selectYearQuarter()" style="width: 90px">确定</a> 
		<a class="easyui-linkbutton"
		   iconCls="icon-cancel" onclick="javascript:$('#dlg2').dialog('close')"
		   style="width: 90px">取消</a>
	</div>
 
    <!-- 查询月报表 选择年份月份 -->
    <div id="dlg3" class="easyui-dialog" closed="true"
		style="width: 250px; height: 280px; padding: 10px 20px" 
		buttons="#dlg-buttons">
		<div class="ftitle"><h3>选择报表年月</h3></div>
		<form id="" method="post" novalidate>
		           选择年分<br>
		    <select class="easyui-combobox"  style="width:100px;" id="year3">
		        <option value="2010">2010</option>
		        <option value="2011">2011</option>
		        <option value="2012">2012</option>
		        <option value="2013">2013</option>
		        <option value="2014">2014</option>
		        <option value="2015">2015</option>
		        <option value="2016">2016</option>
		     </select><br>
		           选择月分<br>
			<select class="easyui-combobox"  style="width:100px;" id="month1">
		        <option value="01">一月</option> <option value="02">二月</option> 
		        <option value="03">三月</option> <option value="04">四月</option>
		        <option value="05">五月</option> <option value="06">六月</option>
		        <option value="07">七月</option> <option value="08">八月</option>
		        <option value="09">九月</option> <option value="10">十月</option>
		        <option value="11">十一月</option> <option value="12">十二月</option>
		     </select>
		</form>
	</div>
	<div id="dlg-buttons">
		<a class="easyui-linkbutton c6" id="ymselect"
		   iconCls="icon-ok" onclick="selectYearMonth()" style="width: 90px">确定</a> 
		<a class="easyui-linkbutton"
		   iconCls="icon-cancel" onclick="javascript:$('#dlg3').dialog('close')"
		   style="width: 90px">取消</a>
	</div>
</body>
</html>